import { PageHeader, Table } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import React from 'react'
import StatusPoint from './StatusPoint'
import TimeRender from './TimeRender'

interface DataType {
  key: React.Key
  name: string
  type: string
  condition: string
  time: string
  action: boolean
}

const onChange = (pagination: any, filters: any, sorter: any, extra: any) => {
  console.log('params', pagination, filters, sorter, extra)
}

const ContentTable = (props: any) => {
  const uniqueObjArr = Array.from(
    new Set(
      props.content.map(
        (item: {
          key: string
          name: string
          type: string
          condition: string
          specifiedTime: string
          time: string
          action: boolean
        }) => item.type
      )
    )
  ).map((item) => {
    return { text: `${item}`, value: `${item}` }
  })

  const calculateData = props.content.map(
    (item: {
      key: string
      name: string
      type: string
      isBegin: string
      condition: string
      specifiedTime: string
      time: string
      action: boolean
      actionContent: string
    }) => {
      if (item.isBegin) {
        if (+item.time > +item.specifiedTime) {
          item.condition = '已超时'
        } else {
          item.condition = '进行中'
        }
      } else if (!item.isBegin) {
        item.time = '0'
        item.condition = '未开始'
      }
      if (item.action) {
        item.actionContent = '发起会议'
      } else {
        item.actionContent = ''
      }

      return {
        key: item.key,
        name: `[${item.type}]${item.name}`,
        type: item.type,
        condition: item.condition,
        time: `${+item.specifiedTime - +item.time}`,
        action: item.actionContent,
      }
    }
  )

  const columns: ColumnsType<DataType> = [
    {
      title: '任务节点名称',
      dataIndex: 'name',
      width: '30%',
    },
    {
      title: '类型',
      dataIndex: 'type',
      filters: uniqueObjArr,
      filterMode: 'tree',
      filterSearch: true,
      onFilter: (value: any, record) => record.type.startsWith(value),
      width: '10%',
    },
    {
      title: '完成情况',
      dataIndex: 'condition',
      filters: [
        {
          text: <span>未开始</span>,
          value: '未开始',
        },
        {
          text: <span>进行中</span>,
          value: '进行中',
        },
        {
          text: <span>已超时</span>,
          value: '已超时',
        },
      ],
      onFilter: (value: any, record) => record.condition.startsWith(value),
      filterSearch: true,
      width: '10%',
      render: (text) => (
        <StatusPoint
          text={`${text}`}
          color={
            text === '进行中'
              ? '#18D151'
              : text === '未开始'
              ? '#C6C6C6'
              : 'red'
          }
        />
      ),
    },
    {
      title: '完成倒计时',
      dataIndex: 'time',
      width: '10%',
      render: (text) => <TimeRender time={text} />,
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '10%',
      render: (text) => (
        <a style={{ fontSize: `15px`, color: '#4285F7' }}>{text}</a>
      ),
    },
  ]

  return (
    <>
      <div
        style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
        <div
          style={{ backgroundColor: '#0878A2', width: `5px`, height: `20px` }}
        />
        <PageHeader title={`当前节点任务:(${props.title})`} />
      </div>
      <Table
        columns={columns}
        dataSource={calculateData}
        onChange={onChange}
        pagination={{ simple: true }}
        scroll={{ y: 'calc(100vh - 370px)' }}
      />
    </>
  )
}

export default ContentTable
